<script setup>

import {ref} from "vue";
import ToolButtonList1 from "./tools/toolButtonList1.vue";
import SvgIcon from "../../Svglcon.vue";
import {Search} from "@element-plus/icons-vue";

const renderTarget = ref('commonUse')
const nameInput = ref('')

</script>

<template>
  <div class="commonUseWarp">
    <div class="commonUse">

      <div class="selectLv1">
        <el-radio-group v-model="renderTarget" size="large" text-color="black" fill="white" style="border-radius: 0px"
                        class="suBottonGroup">
          <el-radio-button class="suButton" label="模型属性" value="commonUse"/>
          <el-radio-button class="suButton" label="成本属性" value=" effectSheet"/>
        </el-radio-group>
        <div style="height: 45px;width: 45px;display: flex;align-items: center;justify-content: center;">
          <svg-icon name="close"></svg-icon>
        </div>
      </div>


      <div class="inputFieldsList" v-if="renderTarget==='commonUse'">
        <div class="inputField">
          <div class="title">
            名称
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            分类
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            编码
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="BDDFAD-99489886"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            尺寸
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            名称
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            尺寸
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input" :suffix-icon="Search"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            名称
          </div>
          <div class="inputBox">
            <el-input v-model="nameInput" style="width: 231px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField" style="">
          <div class="title">
            标高
          </div>
          <div class="inputBox" style="width: 231px;text-align: right">
            <el-input v-model="nameInput" style="width: 164px" placeholder="Please input"/>
          </div>
        </div>
        <div class="inputField">
          <div class="title">
            参考高度
          </div>
          <div style="display: flex;width: 203px;justify-content: flex-end;">
            <div class="inputBox">
              <el-input v-model="nameInput" style="width: 128px" placeholder="Please input"/>
            </div>
            <div style="border: 1px solid #CCCCCC ;border-radius: 4px;margin-left: 5px;">
              <svg-icon name="close"></svg-icon>

            </div>
          </div>
        </div>
      </div>
      <div class="inputFieldsList" v-if="renderTarget==='effectSheet'">


      </div>
    </div>


    <tool-button-list1></tool-button-list1>


  </div>

</template>

<style scoped lang="scss">

.commonUse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;

  .selectLv1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 100%;
    border-bottom: 1px solid #e4e4e4;

  }

  .inputFieldsList {
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 14px;
    padding-bottom: 50px;
    width: 100%;

    .inputField {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: 5px;

      .title {
      }

    }


  }

  .suBottonGroup {
    width: calc(100% - 45px);
    display: flex;
    background-color: white;


  }
}


.suButton {
  :deep( .el-radio-button__inner) {
    background-color: white;
    color: #CCCCCC;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border: none;
    border-radius: 0;
    width: 90px;

  }
}


</style>